<style lang="less" scoped src="./teacherSuspend.less"></style>
<script src="./teacherSuspend.js"></script>

<template>
    <div>
        <Row style="font-size: 15px;">
            <Col span="24">
            教师姓名：<Input v-model="query.name" clearable style="width: 15%"></Input>
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            </Col>
        </Row>
        <Row style="font-size: 15px;;margin-top: 5px">

            <Col span="2">
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal
                v-model="editModal"
                :title="(isRead ? '查看' : (formData.id ? '修改': '新增')) + '停课教师'"
                @on-ok="editModal = false"
                @on-cancel="editModal = false"
                :mask-closable="isRead"
                :closable="isRead"
                width="40%">
            <Row class="table-Row">
                <Col span="8" class="titele"><span style="color: red" >*</span>负责教师：</Col>
                <Col span="16" class="content">
                <Select v-model="formData.mainTeacherId" >
                    <Option v-for="item in teacherList" :key="item.id" :value="item.id">{{item.name}}</Option>
                </Select>
                </Col>
            </Row>
            <Row class="table-Row">
                <Col span="8" class="titele"><span style="color: red" >*</span>代课教师：</Col>
                <Col span="16" class="content">
                <Select v-model="formData.viceTeacherId" >
                    <Option v-for="item in teacherList" :key="item.id" :value="item.id">{{item.name}}</Option>
                </Select>
                </Col>
            </Row>
            <Row class="table-Row">
                <Col span="8" class="titele"><span style="color: red" >*</span>代课班级：</Col>
                <Col span="16" class="content">
                <Select v-model="formData.classId">
                    <Option v-for="item in classList" :key="item.id" :value="item.id">{{item.name}}</Option>
                </Select>
                </Col>
            </Row>
            <Row class="table-Row">
                <Col span="8" class="titele"><span style="color: red" >*</span>代课日期：</Col>
                <Col span="16" class="content">
                <DatePicker  v-model="formData.suspendData" :clearable="!isRead" :readonly="isRead" :editable="false" style="width: 100%"></DatePicker>
                </Col>
            </Row>
            <div slot="footer" v-if="!isRead">
                <Button type="primary" @click="save" >保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="editModal = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>